import React, { Component } from 'react';
import './Home_part.css';
import '../../../node_modules/font-awesome/css/font-awesome.min.css';

export default class Home_part extends Component{
	constructor(props){
    super(props);
    this.state = {
      choose_num: this.props.choose
    }
  }
  onChangeNum(e){
    this.setState({
      choose_num: e
    })
  }
  onChangeNumToo(){
    this.setState({
      choose_num: this.props.choose
    })
  }
  onChangeBody(){
    this.props.onChange(this.state.choose_num)
  }
  render(){
		return(

			<div id="home_part">
        <div className="col-md-12 col-sm-12">
          <h2 >主面板</h2>
          <h4 >您可以通过以下的快捷方式快速访问系统。</h4>
          <div className="row">
            <div className = "top">
            <div className="col-md-6 col-sm-6">
              <div className="main_box">
                <a href="#" onMouseOver={() => {this.onChangeNum(9)}} onMouseOut={() => {this.onChangeNumToo()}} onClick={() => {this.onChangeBody()}}>
                  <i className="fa fa-group fa-5x" ></i>
                  <a href="#"><h1>用户列表</h1></a>
                </a>
              </div>
            </div>
            <div className="col-md-6 col-sm-6">
              <div className="main_box">
                <a href="#" onMouseOver={() => {this.onChangeNum(8)}} onMouseOut={() => {this.onChangeNumToo()}} onClick={() => {this.onChangeBody()}}>
                <i className="fa fa-user-circle fa-5x" aria-hidden="true"></i>
                  <a href="#"><h1>创建用户</h1></a>
                </a>
              </div>
            </div>
            </div>
            <div className = "bottom">
            <div className="col-md-6 col-sm-6">
              <div className="main_box">
                <a href="#" onMouseOver={() => {this.onChangeNum(4)}} onMouseOut={() => {this.onChangeNumToo()}} onClick={() => {this.onChangeBody()}}>
                  <i className="fa fa-bar-chart-o fa-5x"></i>
                  <a ><h1>问卷列表</h1></a>
                </a>
              </div>
            </div>
            <div className="col-md-6 col-sm-6">
              <div className="main_box">
                <a href="#" onMouseOver={() => {this.onChangeNum(5)}} onMouseOut={() => {this.onChangeNumToo()}} onClick={() => {this.onChangeBody()}}>
                  <i class="fa fa-search fa-5x" aria-hidden="true"></i>
                  <a href="#"><h1>典案查询</h1></a>
                </a>
              </div>
            </div>
            {/* <div className="col-md-6 col-sm-6">
              <div className="main_box">
                <a href="#" onMouseOver={() => {this.onChangeNum(9)}} onMouseOut={() => {this.onChangeNumToo()}} onClick={() => {this.onChangeBody()}}>
                  <i className="fa fa-unlock-alt fa-5x"></i>
                  <a ><h4>权限控制</h4></a>
                </a>
              </div>
            </div> */}
            {/* <div className="col-md-6 col-sm-6">
              <div className="main_box">
                <a href="#" onMouseOver={() => {this.onChangeNum(13)}} onMouseOut={() => {this.onChangeNumToo()}} onClick={() => {this.onChangeBody()}}>
                  <i className="fa fa-gears fa-5x"></i>
                  <a ><h4>系统管理</h4></a>
                </a>
              </div>
            </div> */}
            </div>
          </div>
        </div>
        </div>
		)
	}
}